<template>
  <div>
    <checked-title title="门头数量整改排行榜" />
    <div id="mentoubaoshen-zhenggai" style="height:500px"></div>
  </div>
</template>

<script>
let chartMTZG = null
import { MenTouBaoShenDB } from '@/api'

const IconPaiHang = require('@/assets/images/mentoubaoshen/icon-paihang.png')

export default {
  data() {
    return {
      iconPaiHang: IconPaiHang,
    }
  },
  mounted() {
    this.initChart()
  },
  destroyed() {
    if (chartMTZG == null) {
      echarts.init(document.getElementById('mentoubaoshen-zhenggai')).dispose()
    }
  },
  methods: {
    initChart() {
      MenTouBaoShenDB.getZhengGai().then((res) => {
        console.info(res, '11111')

        chartMTZG = echarts.init(
          document.getElementById('mentoubaoshen-zhenggai')
        )

        let yData = [],
          data = []
        const resData = res.data.splice(0, 6)

        for (let index = 0; index < resData.length; index++) {
          yData.push(resData[index].name)
          data.push(resData[index].num)
        }

        data.sort((a, b) => b - a)

        var colorList = [
          new echarts.graphic.LinearGradient(0, 1, 1, 1, [
            { offset: 0, color: 'rgba(0, 113, 230, 0)' },
            { offset: 1, color: 'rgba(0, 117, 236, 1)' },
          ]),
          new echarts.graphic.LinearGradient(0, 1, 1, 1, [
            { offset: 0, color: 'rgba(2,13,50,0)' },
            { offset: 1, color: 'rgba(255, 129, 28, 1)' },
          ]),
          new echarts.graphic.LinearGradient(0, 1, 1, 1, [
            { offset: 0, color: 'rgba(97, 209, 151, 0)' },
            { offset: 1, color: 'rgba(70, 233, 147, 1)' },
          ]),
          new echarts.graphic.LinearGradient(0, 1, 1, 1, [
            { offset: 0, color: 'rgba(2,13,50,0)' },
            { offset: 1, color: 'rgba(0, 228, 255,1)' },
          ]),
          new echarts.graphic.LinearGradient(0, 1, 1, 1, [
            { offset: 0, color: 'rgba(2,13,50,0)' },
            { offset: 1, color: 'rgba(255, 30, 168, 1)' },
          ]),
          new echarts.graphic.LinearGradient(0, 1, 1, 1, [
            { offset: 0, color: 'rgba(255, 210, 0, 0)' },
            { offset: 1, color: 'rgba(255, 210, 0, 1)' },
          ]),
        ]

        let option = {
          xAxis: {
            show: false,
            type: 'value',
            label: { show: false },
          },
          grid: {
            right: '3%',
            left: '0%',
            top: '4%',
            bottom: '1%',
            containLabel: true,
          },
          yAxis: [
            {
              type: 'category',
              inverse: true,
              offset: 60,
              axisLabel: {
                show: true,
                align: 'left',
                textStyle: {
                  color: '#fff',
                  fontSize: '14',
                },
                formatter: function(value, index) {
                  var num = ''
                  var str = ''
                  num = index + 1
                  str = ' {num|No.' + num + '} {title| ' + value + '}'
                  return str
                },
                rich: {
                  num: {
                    color: '#83BDFF',
                    backgroundColor: {
                      image: this.iconPaiHang,
                    },
                    width: 52,
                    height: 40,
                    fontSize: 15,
                    fontWeight: 'bolder',
                    lineHeight: 10,
                    align: 'center',
                  },
                  title: {
                    fontSize: 14,
                    verticalAlign: 'top',
                    color: '#ffffff',
                    padding: [0, 0, -20, 5],
                  },
                },
              },
              splitLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisLine: {
                show: false,
              },
              data: yData,
            },
          ],
          series: [
            {
              type: 'bar',
              zlevel: 1,
              itemStyle: {
                normal: {
                  barBorderRadius: 11,
                  color: (params) => {
                    return colorList[params.dataIndex]
                  },
                },
                shadowColor: 'red',
                shadowOffsetX: 20,
                shadowBlur: 10,
              },
              barWidth: 20,
              data: data,
            },
          ],
        }

        chartMTZG.setOption(option)
      })
    },
  },
}
</script>
